<template>
  <div>
    <v-scale-screen
      width="1920"
      height="1080"
      :boxStyle="{
        backgroundColor: '#05163d',
      }"
    >
      <div class="back">
        <y-button type="primary" @click="$router.go(-2)">返回</y-button>
      </div>
      <div class="wrapper">
        <div class="column">
          <situation-analysis :areaID="areaid" @fullScreen="handleFullScreen('situationAnalysis')"></situation-analysis>
          <situation-direction :areaID="areaid" @fullScreen="handleFullScreen('situationDirection')"></situation-direction>
          <dataTable :areaID="areaid" @fullScreen="handleFullScreen('dataTable')"></dataTable>
        </div>
        <div class="column">
          <mapCharts @updateAreaID="updateAreaID"></mapCharts>
        </div>
        <div class="column">
          <proportionTypes :areaID="areaid" @fullScreen="handleFullScreen('proportionTypes')"></proportionTypes>
          <occupancy-status :areaID="areaid" @fullScreen="handleFullScreen('occupancyStatus')"></occupancy-status>
          <guarantee-analysis :areaID="areaid" @fullScreen="handleFullScreen('guaranteeAnalysis')"></guarantee-analysis>
        </div>
      </div>
    </v-scale-screen>
    <a-modal
      class="full-modal"
      :visible="visibleFullScreen"
      @cancel="handleCancel"
      width="60%"
      centered
      destroyOnClose
      :footer="null"
    >
      <component :is="fullComponent" :areaID="areaid" class="full-screen" :isFullscren="isFullscren"></component>
    </a-modal>
  </div>
</template>

<script>
import situationAnalysis from './components/situationAnalysis'
import situationDirection from './components/situationDirection'
import guaranteeAnalysis from './components/guaranteeAnalysis'
import occupancyStatus from './components/occupancyStatus2'
import mapCharts from './components/map'
import dataTable from './components/table'
import proportionTypes from './components/proportionTypes'

export default {
  components: {
    situationAnalysis,
    situationDirection,
    guaranteeAnalysis,
    occupancyStatus,
    mapCharts,
    dataTable,
    proportionTypes
  },
  data () {
    return {
      visibleFullScreen: false,
      isFullscren: false,
      fullComponent: '',
      areaid: 0
    }
  },
  methods: {
    handleFullScreen (name) {
      this.visibleFullScreen = true
      this.isFullscren = true
      this.fullComponent = name
    },
    updateAreaID (id) {
      this.areaid = id
    },
    handleCancel () {
      this.visibleFullScreen = false
      this.isFullscren = false
    }
  }
}
</script>
<style lang="less" scoped>
  .back {
    position: absolute;
    z-index: 999;
    top: 10px;
    left: 30px;
    /deep/ .y-button--primary {
      background-color: transparent;
    }
  }
  .full-modal {
    /deep/ .ant-modal-body {
      padding: 46px;
      background-color: #05163d;
    }
    /deep/ .ant-modal-close-icon {
      color: #fff;
    }
    /deep/ .full-screen {
      color: #fff;
      .anticon-fullscreen {
        display: none;
      }
    }
  }
  .wrapper {
    width: 1920px;
    height: 1080px;
    background-image: url(../../../assets/images/charts-bg.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    color: #fff;
    padding: 30px;
    padding-top: 57px;
    .column {
      flex: 1;
      position: relative;
      &:nth-child(2) {
        flex: 1;
        margin: 30px;
      }
    }
  }
  /deep/ .border-line {
    box-sizing: border-box;
    width: 100%;
    min-height: 100px;
    position: relative;
    border: 1px solid red;
    border-image: url(../../../assets/images/charts-border.png) 1 1;
    border-width: 1px;
    padding: 20px;
    margin-bottom: 20px;
  }
</style>
